<template>
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>
            <div>
                <img src="../assets/heima.png" alt="">
                <span>电商后台管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <!-- 侧边栏菜单 -->
            <CeBian :menulist="menulist"/>
            <!-- 右侧主体内容 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>    
</template>

<script>
    // 侧边栏
    import CeBian from './cebian/CeBian.vue'
    export default {
        data(){
            return{
                // 左侧菜单数据
                menulist:[],
            }
        },
        components:{
            CeBian
        },
        created(){
            this.getMenuList()
        },
        methods:{
            logout(){
                // 清除token里面的数据
                // window.sessionStorage.clear()
                window.sessionStorage.removeItem('token')
                // 跳转到登录页面
                this.$router.push('/login')
            },
            async getMenuList(){
                // const {data:res} 获取的data数据并转成对象赋值给res
                const {data:res} = await this.$http.get('menus')
                // 如果状态码为200，报错res.meta.msg
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                // 否则就赋值
                this.menulist = res.data
                // console.log(res)
            }
        }
    }
</script>
<style lang="less" scoped>
    .home-container{
        height: 100%;
        .el-header{
            background-color: #373d41;
            display: flex;
            justify-content: space-between;
            padding-left: 15px;
            align-items: center;
            color: #fff;
            font-size: 20px;
            > div{
                display: flex;
                align-items: center;
                span{
                    margin-left: 15px;
                }
            }
        }
        // 侧边栏
        
        .el-main{
            background-color: #eaedf1;
        }
    }
    
</style>
